iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
1
自我挑戰組

重新開始的Vue.js 30day系列 第 21

從頭開始的Javascript 入門 - 實作 js & css clock Day19

  • 分享至 

  • xImage
  •  

#JS and CSS Clock 筆記
demo

目的

學會 js Time 和 用js 操作css
還有基本的ES6語法

步驟

  1. 利用css 製作 分針 時針 秒針
  2. 取時間的函數
    製作js 函數 setDate 取出現在的時間
const now = new Date(); //
const seconds = now.getSeconds();
const mins = now.getMinutes();
const hour = now.getHours();

3.利用時間取得對應角度

const secondsDegrees = ((seconds / 60) * 360) + 90;

零點角度 rotate。秒針轉一圈 60s,每一秒對應角度為
(...s / 60s) * 360°。

4.用得到角度 給值html在style的transform屬性上

const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

5.放上js 計時器

 setInterval(setDate, 1000); //每一1000毫秒 觸發函式

挑戰

影片有提出
若指針在354度切到0度時,
會使指針往前彈回去,這是因為有使用transtion,在角度做切換時會加上的動畫效果,
354→0度會認為是往前,而非轉一圈回到起點,所以動畫先往前轉到0。
解法有:

  • 修改transition 秒數
  • 角度增加

css&js 補充

es6 基本

const 常數
不允許之後做改變
不允許重複宣告 不允許宣告前使用


let 變數

  • let 禁止在同一活動範圍中再次宣告相同名稱的變數。var 會無視第二次宣告,只管指派變數值。但 let 視為重複宣告的語法錯誤。
  • let 禁止在宣告變數之前就使用它。
  • 在全域範圍以 let 宣告的變數,不會成為全域個體(global object)的屬性。但以 var 宣告的變數同時也會是全域個體的屬性。因此 let 變數是真正的區域變數,你用 module 或其他方式載入的程式碼看不到那些 let 變數。註: 在瀏覽器中運行的 JavaScript 之全域個體一律是 window 。

補充link


Template strings

secondHand.style.transform = `rotate(${secondsDegrees}deg)`;`

反括號裡面可以帶變數
補充link
補充link02

css transform

一個很複雜要常搞混的地方
transform-oragin 時鐘的軸點和軸心的初始位置
trsition :指針跳動時的轉場動畫

js 語法


上一篇
從頭開始的Javascript 入門 -Flex Panels Image Gallery Day18
系列文
重新開始的Vue.js 30day21
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2019-12-30 09:09:16

哎呀!! 沒有了... /images/emoticon/emoticon04.gif

我要留言

立即登入留言